Setting Up

Folder structure

The repository for cerev web is called cerev-web. After you have git clone, the following would be the structure of the code.

cerev-web root project structure

.
├── README.md
├── bitbucket-pipelines.yml
├── dist
├── firebase.json
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.cjs
├── public
├── src
├── tailwind.config.cjs
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Summary packages uses

The packages uses for every web projects in HelixByte are as follows;

1. RTK Toolkit + Query with redux-persist
2. OpenAPI generator RTK Query
3. Vite
4. React Router Dom
5. React Hook Forms
6. Zod Validation
7. Tailwindcss
8. Material UI
9. date-fns
10. Firebase Authentication
11. Firebase Storage

Each of these will be covered accordingly. But for now, lets focus on getting the legal compliance module up.

Generating rtk query code

In Helixbyte, we do not write any code that interacts with the backend. As mentioned inside the backend code, we have the capability to generate openApi specified endpoint definition in json, or yaml.

If you look into the following directory, you will find the configuration setting:

src/redux/slices/OpenApi/openapiConfig.ts

import type {ConfigFile} from "@rtk-query/codegen-openapi";

const config: ConfigFile = {
  schemaFile: "http://localhost:3000/api-json", // Or any other ports that you current running your backend.
  apiFile: "../RootApi.ts",
  apiImport: "RootApi",
  outputFile: "./cerevApi.ts",
  exportName: "cerevApi",
  hooks: {
    queries: true,
    lazyQueries: true,
    mutations: true,
  },
  tag: true,
};

export default config;

This is the configuration file necessary that generates all the rtk query mutation and query hooks so that we do not need to write, and yet have strongly consistent type definition between frontend and backend, language agnostic. If you look at the mobile section, the procedures are similar. Generating code based on yaml or json file that follows OpenApi procedures.

Run the following command.

npx @rtk-query/codegen-openapi src/redux/slices/OpenApi/openapiConfig.ts

Once complete generation, cerevApi.ts will contain all the boilerplate code generated.

Wiring up with your frontend

Assuming that you are writing a LegalComplianceScreen.tsx that renders a list of legal compliance in a table format. To make use of the hooks generated from the previous section, try the following code:

LegalComplianceScreen.tsx

export default function LegalComplianceScreen(){

    const {data: legalCompliances, isLoading, isError, isSuccess} = useLegalComplianceControllerGetLegalCompliancesQuery();

    const [updateLegalCompliance, {isSuccess, isLoading, isError}] = useLegalComplianceControllerUpdateLegalComplianceMutation();

    // Jsx Code here
    return (
        //...
    )
}

info

On top of the hooks generated by rtk query, the generator also generates the type definition, so there is no need for you to write models anymore inside your FE. In fact in HelixByte, we strongly discourages it to prevent human errors. The openApi schema file is the single source of truth for all our models and endpoint definitions. No more manually writing it in FE.

All query and mutation hooks are defined for you, so you can focus on your design.